<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"
    />
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
    <style>
      @keyframes fade {
        from {
          opacity: 1;
        }

        to {
          opacity: 0.25;
        }
      }

      div.spinner {
        width: 45px;
        height: 45px;
        display: inline-block;
        position: absolute;
        left: -45px;
        top: -60px;
        right: 0;
        bottom: 0;
        margin: auto;
      }

      div.spinner div {
        width: 10%;
        height: 40%;
        background: #5682a3;
        position: absolute;
        left: 100%;
        top: 100%;
        opacity: 0;
        animation: fade 1s linear infinite;
        border-radius: 30px;
      }

      div.spinner div.bar1 {
        transform: rotate(0deg) translate(0, -142%);
        animation-delay: 0s;
      }

      div.spinner div.bar2 {
        transform: rotate(30deg) translate(0, -142%);
        animation-delay: -0.9167s;
      }

      div.spinner div.bar3 {
        transform: rotate(60deg) translate(0, -142%);
        animation-delay: -0.833s;
      }

      div.spinner div.bar4 {
        transform: rotate(90deg) translate(0, -142%);
        animation-delay: -0.75s;
      }

      div.spinner div.bar5 {
        transform: rotate(120deg) translate(0, -142%);
        animation-delay: -0.667s;
      }

      div.spinner div.bar6 {
        transform: rotate(150deg) translate(0, -142%);
        animation-delay: -0.5833s;
      }

      div.spinner div.bar7 {
        transform: rotate(180deg) translate(0, -142%);
        animation-delay: -0.5s;
      }

      div.spinner div.bar8 {
        transform: rotate(210deg) translate(0, -142%);
        animation-delay: -0.41667s;
      }

      div.spinner div.bar9 {
        transform: rotate(240deg) translate(0, -142%);
        animation-delay: -0.333s;
      }

      div.spinner div.bar10 {
        transform: rotate(270deg) translate(0, -142%);
        animation-delay: -0.25s;
      }

      div.spinner div.bar11 {
        transform: rotate(300deg) translate(0, -142%);
        animation-delay: -0.1667s;
      }

      div.spinner div.bar12 {
        transform: rotate(330deg) translate(0, -142%);
        animation-delay: -0.0833s;
      }
    </style>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but 彩信 doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong
      >
    </noscript>
    <div id="app">
      <div class="spinner">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
        <div class="bar4"></div>
        <div class="bar5"></div>
        <div class="bar6"></div>
        <div class="bar7"></div>
        <div class="bar8"></div>
        <div class="bar9"></div>
        <div class="bar10"></div>
        <div class="bar11"></div>
        <div class="bar12"></div>
      </div>
    </div>
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
  <script>
    // 屏蔽safair双击，双指页面放大问题
    window.onload = function() {
      document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      var lastTouchEnd = 0;
      document.addEventListener(
        'touchend',
        function(event) {
          var now = new Date().getTime();
          if (now - lastTouchEnd <= 300) {
            event.preventDefault();
          }
          lastTouchEnd = now;
        },
        false
      );
      document.addEventListener('gesturestart', function(event) {
        event.preventDefault();
      });
    };
  </script>
</html>
